import { fileURLToPath, URL } from 'node:url'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 需要转换的单位，默认为"apx"
          viewportWidth: 1920, // 设计稿的视口宽度
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 能转化为vw的属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: ['.ignore-'], // 忽略转换正则匹配项
          minPixelValue: 1, // 最小的转换数值，如果是小于或等于这个值，则不进行转换。
          mediaQuery: false, // 是否允许在媒体查询中转换px
          replace: true, // 是否转换后直接更换属性值
        }),
      ],
    },
  },
})
